<!--  -->
<template>
  <div class='label-pop'>
    <van-popup 
      v-model="makeTagPop" 
      position="right" 
      @close="downTagPop" 
      :style="{ width: '90%'}"
      @opened="opened" 
      ref="makeTagRef"
      :lock-scroll="false" 
      :lazy-render="false">
      <div class="label-main">
        <div class="mb-20"></div>
        <div class="label-title">打标签</div>
        <van-search v-model="groupName" placeholder="请输入搜索关键词" shape="round"  @input="labelSearch"/>
        <div class="flex label-titleBox">
          <h3 class="classify-title">标签组</h3>
          <h3 class="tabs-title">全部标签</h3>
        </div>
        <div class="classify-content flex">
          <div class="classify-left" ref="groupTag"  >
              <div class="left-box flex" v-if="groupList.length">
                <div class="group-box">
                  <div  :class="classifyIndex === -1 ? 'on':''"  @click="classifyOn(-1)">全部标签</div>
                </div>
                <block v-for="(item,index) in groupList" :key="index" class="group-box">
                  <div  :class="classifyIndex === index ? 'on':''" @click="classifyOn(index,item)">{{item.group_name}}</div>
                </block>
              </div>
              <span id="classifyMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
          </div>
          <div ref="handpickList" class="classify-main" >
              <div  class="classify-box flex"  v-if="tags.length > 0">
                <block v-for="(item,index) in tags" :key="index" class="goods-item">
                  <div class="tags-box" :class="item.current_used? 'on':''" @click="tabsClick(item)">{{item.name}}</div>
                </block>
              </div>
              <van-empty description="暂无数据" v-else />
              <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
          </div>
        </div>
      </div>
      <div class="mb-65"></div>
      <div class="footer-btn flex-a-c flex-j-sb">
        <div class="footer-cancel"  @click.stop="downTagPop">取消</div>
        <div class="footer-confirm" @click.stop="confirmOn">+新增标签</div>
      </div>
    </van-popup>
    
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';


export default {
name:'',
props: ['makeTagPop','tags','groupList','groupName'],

//import引入的组件需要注入到对象中才能使用
components: {},
data() {
return {
  keyWord:'',
  classifyIndex:-1,
  classify:[],
  classifyList:[],
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  downTagPop() {
    this.$emit('update:makeTagPop', this.makeTagPop=false);
  },
  labelSearch(val) {
    this.$emit('groupChange', val);
  },
  onLoadMore() {
    this.$parent.dividendScroll();
  },
  onLoadClassify() {
    this.$parent.groupScroll();
  },
  opened() {
    this.$parent.openedOn();
  },
  classifyOn(index, item = {}) {
    this.classifyIndex = index;
    this.$emit('classifyOn', {item:item});
  },
  confirmOn() {
    this.$parent.confirmClick();
  },
  tabsClick(item) {
    this.$emit('tabsClick', {item:item});
  },
  
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
 #appMain .pcStyle  .van-popup {
  width: 350px !important;
} 
</style>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .mb-65 {
    height: 65px;
    clear: both;
  }
  .label-titleBox {
    .classify-title {
      font-size: 14px;
      font-weight: bold;
      color: #1B1B1B;
      padding:0 0 21px 0;
      min-width: 80px;
      text-align: center;
    }
    .tabs-title {
      font-weight: bold;
      font-size: 14px;
      padding:0 0 20px 0;
      width: calc(100% - 16px);
      text-align: center;
    }
  }
  
  .mb-20 {
    height: 20px;
    clear: both;
  }
  .label-main {
    // padding:20px 0 0 0;
    position: relative;
    .label-title {
      border-left: 2px solid #f14e4e;
      font-size: 16px;
      line-height: 16px;
      font-weight: bold;
      text-align: left;
      padding:0 0 0 10px;
      margin: 0 0 0 13px;
    }



    .classify-content {
      padding: 13px 0 0 0;
      position: relative;

      .classify-left {
        background-color: #fff;
       
        height:71vh;
        overflow: hidden;
        .left-box {
          max-width: 105px;
          // padding: 0 0 50px 0;
          // height: 87vh;
          // overflow-y: scroll;
          border-right: 1px solid #E9E5E5;
          flex-direction: column;
          div {
            // padding: 0 0 20px 0;
            text-align: center;
            font-size: 11px;
            color: #212121;
            display: inline-block;
            word-wrap: break-word;
            word-break: break-all;
          }
          .group-box {
            padding: 0 0 1.25rem 0;
            cursor: pointer;
          }
          .on {
            font-size: 11px;
            // line-height: 11px;
            display: inline-block;
            padding:5px 7px; 
            border-radius: 11px;
            background: #F78B00;
            color: #FFFFFF;
            position: relative;
            // margin: 0 0 23px 0;
          }
        }
      }
      .classify-main {
        box-sizing: border-box;
        width: calc(100% - 16px);
        height: 71vh;
        overflow: hidden;
        // padding:0 0 50px 0;
        // flex:1;
        margin: 0 8px;
        position: relative;
        .classify-box {
          // height: 87vh;
          // overflow-y: scroll;

          
          // padding: 0 0 50px 0;
          // justify-content: space-between;
          flex-flow: row wrap;
          cursor: pointer;
          // &::after {
          //   content: '';
          //   font-size: 12px;
          //   line-height: 12px;
          //   color: #212121;
          //   padding:9px 8px;
          //   border: 1px solid #D0D0D0;
          //   border-radius: 4px;
          //   min-width: 74px;
          // }
          .goods-item {
            border-radius: 10px 10px 10px 10px;
            background-color: #fff;
            min-width: 74px;
            // width: calc(50% - 4px);
            // width: calc((100% - 8px*2)/3);
            margin: 0 8px 8px 0;
            position: relative;
            // &:nth-child(2n) {
            //     margin-right: 0;
            // }
            .tags-box {
              font-size: 12px;
              line-height: 12px;
              color: #212121;
              padding:9px 8px;
              border: 1px solid #D0D0D0;
              border-radius: 4px;
              min-width: 74px;
              word-wrap: break-word;
              word-break: break-all;
            }
            .on {
              color:#F78B00;
              border:1px solid #F78B00;
            }
          }
        }
      }
    }
  }
  .footer-btn {
      background-color: #fff;
      width: 100%;
      box-sizing: border-box;
      position: fixed;
      bottom: 0px;
      left:0;
      padding:10px 15px;
      .footer-cancel {
        font-size: 14px;
        color: #1B1B1B;
        width: calc((100% - 10px*2)/2);
        
        padding:12px 0px;
        border: 1px solid #D0D0D0;
        border-radius: 20px;
      }
      .footer-confirm {
        font-size: 14px;
        color: #FFFFFF;
        font-weight: 500;
        width: calc((100% - 10px*2)/2);
        background: #F78B00;
        padding:12px 0px;
        border-radius: 20px;
        // padding:12px 58px;
      }
    }
</style>